/**
 * 功能描述: 文字提示样式表
 * @author 崔孝楠
 * @date 2022/10/6 10:30
 * @version 1.0
 */
@import '../../style/index.scss';

// 基础提示框布局
@mixin tooltip--layout {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $line-height-base;
  position: absolute;
  z-index: 1070;
  display: none;
  width: -moz-max-content;
  width: max-content;
  max-width: 250px;
}

// 提示框箭头布局
@mixin tooltip-arrow--layout {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  overflow: hidden;
}

// 基础箭头形状布局
@mixin tooltip-arrow-inner--layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 5px;
  height: 5px;
  margin: auto;
}

// 提示框内文字布局
@mixin tooltip-content--layout {
  min-width: 30px;
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
}

// 提示框显示
@mixin tooltip-show--layout {
  display: block;
}

@include b(tooltip-wrapper) {
  position: relative;
  display: inline-block;

  &:hover {
    @include b(tooltip) {
      @include tooltip-show--layout;
    }
  }
}

// 基础提示框样式
@include b(tooltip) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  @include tooltip--layout;
}


// 基础提示框箭头样式
@include b(tooltip-arrow) {
  background: transparent;
  @include tooltip-arrow--layout;

}

// 基础箭头形状样式
@include b(tooltip-arrow-content) {
  background-color: $tooltip-background-color;
  content: "";
  pointer-events: auto;
  @include tooltip-arrow-inner--layout;
}

// 提示框内文字样式
@include b(tooltip-inner) {
  color: $color-white;
  background-color: $tooltip-background-color;
  border-radius: $border-radius-base;
  box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
  @include tooltip-content--layout;
}

// 提示框在上左边时布局
@include b(tooltip-placement-top-left) {
  padding-bottom: $tooltip-placement-padding;
  bottom: 100%;

  // 箭头布局
  @include b(tooltip-arrow){
    left: 13px;
    bottom: -5px;
  }
}

// 提示框在上边时布局
@include b(tooltip-placement-top) {
  padding-bottom: $tooltip-placement-padding;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);

  // 箭头布局
  @include b(tooltip-arrow){
    left: 50%;
    transform: translate(-50%);
    bottom: -5px;
  }
}

// 提示框在上右边时布局
@include b(tooltip-placement-top-right) {
  padding-bottom: $tooltip-placement-padding;
  bottom: 100%;
  right: 0;

  // 箭头布局
  @include b(tooltip-arrow){
    right: 13px;
    bottom: -5px;
  }
}

// 提示框在上边时箭头样式
.#{$namespace}-tooltip-placement-top-left,
.#{$namespace}-tooltip-placement-top,
.#{$namespace}-tooltip-placement-top-right {
  // 箭头形状样式
  @include b(tooltip-arrow-content) {
    box-shadow: 3px 3px 7px #00000012;
    transform: translateY(-6px) rotate(45deg);
  }
}

// 提示框在右上边时布局
@include b(tooltip-placement-right-top){
  padding-left: $tooltip-placement-padding;
  left: 100%;
  bottom: 50%;
  transform: translateY(50%);

  // 箭头布局
  @include b(tooltip-arrow) {
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
  }
}

// 提示框在右边时布局
@include b(tooltip-placement-right){

  padding-left: $tooltip-placement-padding;
  left: 100%;
  bottom: 50%;
  transform: translateY(50%);

  // 箭头布局
  @include b(tooltip-arrow) {
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
  }
}

// 提示框在右下边时布局
@include b(tooltip-placement-right-bottom){
  padding-left: $tooltip-placement-padding;
  left: 100%;
  bottom: 0;
  // 箭头布局
  @include b(tooltip-arrow) {
    bottom: 5px;
    left: -5px;
  }
}

// 提示框在右边时箭头样式
.#{$namespace}-tooltip-placement-right-top,
.#{$namespace}-tooltip-placement-right,
.#{$namespace}-tooltip-placement-right-bottom {
  // 箭头形状样式
  @include b(tooltip-arrow-content) {
    box-shadow: -3px 3px 7px #00000012;
    transform: translate(6px) rotate(45deg);
  }
}

// 提示框在下右边时布局
@include b(tooltip-placement-bottom-right) {
  padding-top: $tooltip-placement-padding;
  right: 0;
  // 箭头布局
  @include b(tooltip-arrow) {
    right: 13px;
    top: -5px;
  }
}

// 提示框在下边时布局
@include b(tooltip-placement-bottom) {
  padding-top: $tooltip-placement-padding;
  left: 50%;
  transform: translateX(-50%);
  // 箭头布局
  @include b(tooltip-arrow) {
    left: 50%;
    transform: translate(-50%);
    top: -5px;
  }
}

// 提示框在下左边时布局
@include b(tooltip-placement-bottom-left) {
  padding-top: $tooltip-placement-padding;
  left: 0;
  // 箭头布局
  @include b(tooltip-arrow) {
    left: 13px;
    top: -5px;
  }
}

// 提示框在下边时箭头样式
.#{$namespace}-tooltip-placement-bottom-right,
.#{$namespace}-tooltip-placement-bottom,
.#{$namespace}-tooltip-placement-bottom-left {
  // 箭头形状样式
  @include b(tooltip-arrow-content) {
    box-shadow: -3px -3px 7px #00000012;
    transform: translateY(6px) rotate(45deg);
  }
}

// 提示框在左下边时布局
@include b(tooltip-placement-left-bottom) {
  padding-right: $tooltip-placement-padding;
  right: 100%;
  bottom: 0;
  // 箭头布局
  @include b(tooltip-arrow) {
    bottom: 5px;
    right: -5px;
  }
}

// 提示框在左边时布局
@include b(tooltip-placement-left) {
  padding-right: $tooltip-placement-padding;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  // 箭头布局
  @include b(tooltip-arrow) {
    top: 50%;
    transform: translateY(-50%);
    right: -5px;
  }
}

// 提示框在左上边时布局
@include b(tooltip-placement-left-top) {
  padding-right: $tooltip-placement-padding;
  right: 100%;
  top: 0;
  // 箭头布局
  @include b(tooltip-arrow) {
    top: 5px;
    right: -5px;
  }
}

// 提示框在左边时箭头样式
.#{$namespace}-tooltip-placement-left-top,
.#{$namespace}-tooltip-placement-left,
.#{$namespace}-tooltip-placement-left-bottom {
  // 箭头形状样式
  @include b(tooltip-arrow-content) {
    box-shadow: 3px -3px 7px #00000012;
    transform: translate(-6px) rotate(45deg);
  }
}

